标题纯属搞笑（不过我真的差一点把服务器卡了）。本文将简单介绍 js 插件开发的基础语法和模板。

js 基本语法

变量定义

var a = 1; // 整数
var b = 0.33; // 浮点数
var c = "string"; // 字符串
var d = new RegExp("[0-9]"); // 正则表达式
var e = /[0-9]/; // 正则表达式
var f = /\d/; // 正则表达式
var g = {"name":"Tom","id":"1"}; // json
var h = function() {alert("This is a function");}; // 函数，使用 h() 调用

从上面的例子可以看出，js 中的变量使用 var 声明，有很多用途。

变量运算

下面的例子可以看出各类型变量的加法：

var a = 1;
var b = 0.33;
var c = "QAQ";
var d = "1";
a+b; // 1.33
a+c; // "1QAQ"
a+d; // "11"
b+c; // "0.33QAQ"
b+d; // "0.331"
c+d; // "QAQ1"

可以看出如果有字符串，则会将另一个变量转化为字符串；否则为整数/实数运算。

下面是整数运算的例子：

var a = 1;
var b = 2;
a+b; // 3
a-b; // -1
a*b; // 2
a/b; /* 0.5 */
a%b; // 1

可以看到，与其他一些语言不同，这里的除号为实数除法，并非整除。要想取整，可以参考如下代码：

var a = 5;
var b = 2;
/* 向下取整 */
var x = parseInt(a/b);
var y = Math.floor(a/b);
/* 向上取整 */
var z = Math.ceil(a/b);
/* 四舍五入 */
var w = Math.round(a/b);

条件分支

js 的条件分支使用 if / else if / else，下面是一个例子：

var a = 2;
if(a < 0) {
    console.log("Case 1. ");
}
else if(a < 1) {
    console.log("Case 2.");
}
else {
    console.log("Case 3");
}

for 循环

js 的 for 循环有三个参数：

for(/*语句1*/;/*语句2*/;/*语句3*/)

语句 1 在开始前执行，语句 2 是运行循环代码块的条件，语句 3 在循环代码块运行后执行。

例子：

for(var i=0;i<5;i++) {
    console.log("The number is "+i);
}

结果：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

for-in 循环

var a = {"fname":"Bill","lname":"Gates"};
var txt = "";
for(var x in a) {
    txt = txt + a[x];
}
console.log(txt);

使用 for-in 循环来遍历 a 中的元素，结果：

BillGates

while 循环

while(/*条件*/) {
    /*执行的代码*/
}

例如：

var a = 5;
while(a > 0) {
    console.log(a);
    a --;
}

continue-break

break 语句将直接跳出循环，continue 将会结束这次循环，运行下一次循环。

函数定义

function f() {
    console.log("calling function f()");
}
var g = function(x, y) {
    while(x>0) {
        console.log(y);
    }
}
f();
g();

自调用函数

(function() {
    console.log("我可以调用自己");
})();

常用输出

console.log("向控制台输出一行文字");
console.warn("向控制台输出一行警告");
console.error("想控制台输出一条错误");
alert("弹出窗口");

写入 html

我们可以使用 document.getElementById() 来获取指定 id 的元素，不限于 div。

由于不方便展示效果，我们推荐一个网站，将下面代码 copy 进去即可预览效果。

<script>
    function f() {
        document.getElementById("output").innerHTML = "<p>替换文字</p>";
    }
</script>
<div id="output"></div>
<button onclick="f()">替换</button>

从输入框获取输入内容

同样的，我们按照 id 获取。

<script>
    function submit() {
        document.getElementById("watch").innerHTML = "<p>你的名字是："+document.getElementById("name").value+"</p>";
    }
</script>
<input id="name" placeholder="你的名字"></input>
<button onclick="submit()">提交</button>
<p>预览：</p>
<div id="watch"></div>

浏览器本地存储变量

浏览器本地存储变量，刷新或关闭浏览器均可。

这里，我们使用 localStorage。需要注意的是，localStorage 默认以字符串形式存储，访问时注意强制类型转换。

注意：大多数浏览器均支持，但仍有少输浏览器不支持，可以采取其他方法。

<script>
    function submit() {
        localStorage.yourName = document.getElementById("name").value;
    }
    function watchSubmit() {
        document.getElementById("watch").innerHTML = "<p>浏览器存储的名字是："+localStorage.yourName+"</p>";
    }
</script>
<input id="name" placeholder="你的名字"></input>
<button onclick="submit()">提交</button>
<button onclick="watchSubmit()">显示预览</button>
<p>预览：（可以刷新网页或退出浏览器试试）</p>
<div id="watch"></div>

设置延时处理

var a = setTimeout(function() {
    alert("时间到");
}, 5000);

意思是延时 5000 毫秒（5 秒）执行该函数。想要清除延时的进程，可以用

clearTimeout(a);

设置每隔一段时间重复处理

var a = setInterval(function() {
    console.log("时间到");
}, 5000);

每隔 5 秒处理一遍该函数。想要结束，可以用

clearInterval(a);

暂无更多更新